<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>css</title>
    <link rel="stylesheet" href="./css/reset.css"/>
    <link rel="stylesheet" href="./css/effecive_html_css.css">
</head>

<body>
<h1>Effective 1:能用HTML/CSS解决的问题就不要用JS</h1>
<h2>导航高亮：hover</h2>
<nav class="nav">
    <ul class="left-ul">
        <li>hover</li>
        <li>before</li>
        <li>home</li>
        <li class="sell">
            buy
            <ul class="sell-wrapper">
                <li>good1</li>
                <li>good2</li>
                <li>good3</li>
            </ul>
        </li>
        <li class="sell">
            sell
            <ul class="sell-wrapper">
                <li>good1</li>
                <li>good2</li>
                <li>good3</li>
            </ul>
        </li>
    </ul>
</nav>
<br><br><br>
<h2>自定义radio/checkbox的样式</h2>
<form>
    <section class="radio-wrapper">
        <label>
            <input type="radio" name="fruits" value="apple">
            <span class="radio-diy"></span>
            apple
        </label>
        <label>
            <input type="radio" name="fruits" value="pear">
            <span class="radio-diy"></span>
            pear
        </label>
        <label>
            <input type="radio" name="fruits" value="banana">
            <span class="radio-diy"></span>
            banana
        </label>
    </section>
    <br>
    <section class="checkbox-wrapper">
        <label>
            <input type="checkbox" name="address" value="beijing">
            <span class="checkbox-diy"></span>
            北京
        </label>
        <label>
            <input type="checkbox" name="address" value="shanghai">
            <span class="checkbox-diy"></span>
            上海
        </label>
        <label>
            <input type="checkbox" name="address" value="guangzhou">
            <span class="checkbox-diy"></span>
            广州
        </label>
    </section>
</form>
<br><br><br>
<h2>多列等高</h2>
<div class="dg-wrapper">
    <div class="children-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore, est neque maxime
        quibusdam deleniti praesentium, quidem dolores incidunt dicta, repudiandae et magni suscipit error. Recusandae
        consequatur possimus illo expedita!Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore, est
        neque maxime
        quibusdam deleniti praesentium, quidem dolores incidunt dicta, repudiandae et magni suscipit error. Recusandae
        consequatur possimus illo expedita!
    </div>
    <div class="children-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas excepturi quos
        repudiandae sunt aut. Cum, reiciendis, tempora, exercitationem architecto ab facilis error nihil repellat illum
        nemo quisquam et culpa. Itaque.
    </div>
    <div class="children-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum earum perferendis
        officia id repellendus consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum earum
        perferendis
        officia id repellendus consectetur laudantium, temporibus recusandae vitae sequi eligendi soluta quibusdam
        tempora quis dolorum nemo mollitia illum.
    </div>
    <div class="children-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum architecto dolor
        quas reprehenderit culpa neque itaque vitae perferendis nulla, soluta quia ab esse placeat atque eos est
        molestiae minima.
    </div>
</div>
<h2>需要根据个数显示不同样式</h2>
<h4>实现方式1： flex</h4>
<ul class="many-li-ul-flex-wrapper">
    <li class="many-li">1</li>
    <li class="many-li">2</li>
    <li class="many-li">3</li>
</ul>
<h4>向前选择：只显示第二个，把第一个隐藏掉</h4>
<ul class="many-li-ul-nth-wrapper">
    <li class="many-li">1</li>
    <li class="many-li">2</li>
    <li class="many-li">3</li>
</ul>
<br>
<h2>使用表单提交，回车提交</h2>
<form id="searchForm" action="/search">
    用户：<input type="text" name="username"/><br>
    密码：<input type="password" name="password"/>
    <button id="searchFormSubmit" type="submit">提交</button>
</form>
<br>
<h2>巧用CSS3伪类</h2>
<form action="" class="search-form">
    <input type="search" class="search-input"/>
    <span class="icon-search">search</span><br>
    <input type="email" class="number-input">
    <span class="number-tip">isOk</span>
</form>
<br>
<h2>hover显示提示信息</h2>
<article>
    <p>hello, <span class="hover-span" data-title="this is a test!">world</span></p>
</article>

<script src="./js/effecitve_html_css.js"></script>
</body>

</html>